<template>
  <div class="side_bar">
    <!-- 侧边栏菜单区 -->
    <el-menu
      background-color="rgb(50, 55, 68)"
      text-color="#fff"
      active-text-color="rgb(0, 122, 204)"
      width=""
    >
      <template v-for="item in menuList">
        <!-- 获取一级菜单 -->
        <template v-if="item.children.length != 0">
          <el-submenu :index="item.id + ''" :key="item.index">
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span>{{ item.note }}</span>
            </template>
            <!-- 获取二级菜单 -->
            <template v-for="subItem in item.children">
              <!-- 如果存在三级菜单 -->
              <el-submenu
                v-if="subItem.children.length != 0"
                :index="subItem.id + ''"
                :key="subItem.index"
              >
                <!-- 先展示一下二级菜单 -->
                <template slot="title">
                  <i class="el-icon-notebook-1"></i>
                  <span>{{ subItem.note }}</span>
                </template>
                <!-- 执行三级菜单点击 -->
                <el-menu-item
                  v-for="threeItem in subItem.children"
                  :key="threeItem.index"
                  :index="threeItem.id + ''"
                  @click="toSubItem(threeItem)"
                >
                  <!-- 展示三级菜单 -->
                  <template slot="title">
                    <i class="el-icon-notebook-1"></i>
                    <span>{{ threeItem.note }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>

              <!-- 仅存在二级菜单 -->
              <el-menu-item
                v-else
                :index="subItem.id + ''"
                :key="subItem.index"
                @click="toSubItem(subItem)"
              >
                <template #title>
                  <span>{{ subItem.note }}</span>
                </template>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>

        <!-- 仅存在一级菜单 -->
        <template v-else>
          <el-menu-item
            :index="item.index"
            :key="item.index"
            @click="toSubItem(item)"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ item.note }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

            <!-- <el-menu-item-group v-if="item.children">
              <el-menu-item
                index="subitem.id+' '"
                v-for="subitem in item.children"
                :key="subitem.id"
                @click="toSubItem(subitem)"
              >
                {{ subitem.note }}
              </el-menu-item>
            </el-menu-item-group> -->

<script>
export default {
  data() {
    return {
      menuList: [],
    };
  },

  //生命周期函数
  created() {
    this.getMenuList();
  },
  methods: {
    //获取所有的菜单
    getMenuList() {
      var T = JSON.parse(localStorage.getItem("userInfo"));
      this.menuList = T.menus;
    },

    //去对应子菜单
    toSubItem(subitem) {
      if (subitem.path != this.$route.path) this.$router.push(subitem.path);
    },
  },
};
</script>

<style lang="less" scoped>
.side_bar {
  float: left;
  width: 17%;
  height: calc(~"100% - 60px");
  background-color: rgb(50, 55, 68);
}
.submenu {
  min-width: 0px !important;
}
</style>